<!--
 * @name: SysCas404.vue
 * @author: XU>.<CHEN
 * @date: 2022-03-02 17:42
 * @description：404页面
 * @update: 2022-03-02 17:42
 -->
<template>
  <div class="background">
    <div class="main">
      <div class="left">
        <video loop="loop" autoplay="autoplay" class="video_logo" playsinline muted>
          <source src="@/assets/images/roll2.mp4" type="video/mp4">
        </video>
      </div>
      <div class="right">
        <div class="right_main">
          <span class="number center">404</span>
          <p class="center">您访问的页面找不到了喔~</p>
          <a class="back_home center" href="#" @click.prevent="backHome">返回首页</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {getCurrentInstance, reactive, toRefs} from 'vue'

export default {
  name: 'SysCas404',
  setup() {
    const { proxy } = getCurrentInstance() as any
    const data = reactive({
      backHome
    })

    function backHome() {
      proxy.$router.push({ name: 'home' })
    }
    return {
      ...toRefs(data)
    }
  }
}

</script>
<style lang='scss' scoped>
  .background {
    background-color: #81c0ff;
    height: 100vh;
  }
  .main {
    width: 50%;
    height: 50%;
    min-width: 800px;
    max-width: 1400px;
    min-height: 450px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto;
    background-color: aliceblue;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 10px;
    box-shadow: 0 0 20px 5px cadetblue; // x偏移 y偏移 模糊半径 阴影尺寸
    .left {
      float: left;
      width: 50%;
      height: 100%;
      background-color: #8e52ff;
      .video_logo {
        width: 100%;
        height: 100%;
        position: relative;
        top: 18px;
      }
    }
    .right {
      float: left;
      width: 50%;
      height: 100%;
      border-radius: 0 10px 10px 0;
      .right_main {
        width: 300px;
        height: 250px;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
      .number {
        font-size: 110px;
        font-weight: 300;
      }

      .back_home {

      }
    }
  }

  .center {
    display: block;
    width: 100%;
    text-align: center;
  }

</style>
